    //获取左右两边按钮
    var letfBtn = document.querySelector('.left')
    var rightBtn = document.querySelector('.right')

    //获取ul
    var ulEle = document.querySelector('.box .images')
    //第一张图片和最后一张图片
    var firstImg = ulEle.firstElementChild
    var lastImg = ulEle.lastElementChild
    // 初始li标签的个数 
    var liCount = ulEle.children.length

    // 获取第一个真实li元素
    var firstLiEle = ulEle.firstElementChild
    // 获取最后一个真实li元素
    var lastLiEle = ulEle.lastElementChild
    // li 标签的宽度
    var liWidth = firstLiEle.offsetWidth

    // 追加到末尾
    ulEle.appendChild(firstLiEle.cloneNode(true))
    // 将最后一个元素插入到第一个位置
    ulEle.insertBefore(lastLiEle.cloneNode(true), firstLiEle)

    // 改变ul的宽度
    ulEle.style.width = ulEle.children.length * liWidth + 'px'
    ulEle.style.left = -liWidth + 'px'

    // 记录图片位置
    var index = 1

    //点击左按钮
    letfBtn.addEventListener('click', function () {
        console.log('点击左按钮');
        console.log('点击右按钮');
        ++index
        anim(ulEle, -index * liWidth, function () {
            console.log(index);
            if (index > liCount) {
                ulEle.style.left = -liWidth + 'px'
                index = 1
            }
            console.log(index);

            selectItem(index)
        })
    })

    //点击右按钮
    rightBtn.addEventListener('click', function () {
        console.log('点击右按钮');
        --index
        anim(ulEle, -index * liWidth, function () {
            if (index < 1) {
                ulEle.style.left = -liCount * liWidth + 'px'
                index = 3
            }
            console.log(index);
            selectItem(index)

        })
    })


    // 获取小圆圈
    var iListEles = document.querySelector('.round')

    for (var i = 0; i < iListEles.children.length; i++) {
        var iItemEle = iListEles.children[i]
        // 设置 索引
        iItemEle.setAttribute('data-index', i + 1)

        iItemEle.addEventListener('click', function () {
            console.log(this.dataset.index);
            if (this.dataset.index == index) {
                return
            }
            //改变索引
            index = this.dataset.index - 0
            selectItem(index)
            // 索引控制动画范围
            anim(sliderUlEle, -index * liWidth)

        })
    }


    // 选中指示器
    function selectItem(indexNum) {
        // 排他
        for (var j = 0; j < iListEles.children.length; j++) {
            if (indexNum === j + 1) {
                iListEles.children[j].className = 'select'
            } else {
                iListEles.children[j].className = ''
            }
        }
    }

// 动画简单封装
function anim(element, endPoint, callback) {
    // console.log('点击次数', element.timer);
            // 节流 防止 时间循环 被 多次触发
            if (element.timer) {
                return
            }
            var time = setInterval(function () {
                // 使用 元素属性 记录开启的时间循环
                element.timer = time
                if (element.offsetLeft === endPoint) {
                    clearInterval(time)
                    element.timer = null

                    // 逻辑与 中断
                    callback && callback()
                    return
                }
                var num = (endPoint - element.offsetLeft) / 8
                num = num > 0 ? Math.ceil(num) : Math.floor(num)

                // console.log('num:', num);
                element.style.left = element.offsetLeft + num + 'px'

            }, 20)
        }